/**
 * 居家模块
 * **/
import './index.scss'
import { getHomeGoods } from '../../api/home'
import { useEffect, useState } from 'react'
import { RightOutlined } from '@ant-design/icons'
export default () => {
    /**
     * 存放居家数据
     * **/
    const [list, setList] = useState([])
    /**
     * 获取居家数据
     * **/
    const getList = async () => {
        try {
            const data = await getHomeGoods()
            setList(data)
        } catch (error) { }
    }
    useEffect(() => {
        getList()
    }, [])
    return (
        <div className='homeGoods'>
            {
                list.map(item =>
                    <>
                        <div className="top" key={item.id}>
                            <h1>{item.name}</h1>
                            <div>
                                <p>{item.children.map(child => <span>{child.name}</span>)}</p>
                                <p>查看全部<RightOutlined></RightOutlined></p>
                            </div>
                        </div>
                        <div className="pic">
                            <div className='left'>
                                <img src={item.picture} alt="" />
                                <div><p>{item.name}馆</p><p>{item.saleInfo}</p></div>
                            </div>
                            <div className="right">
                                {item.goods.map(goods => <div>
                                    <img src={goods.picture} />
                                    <p className='name'>{goods.name}</p>
                                    <p className='desc'>{goods.desc}</p>
                                    <p className='price'>￥{goods.price}</p>
                                    <div className="mask">
                                        <p>
                                            <b>找相似</b><br/>
                                            <span>发现更多宝贝</span>
                                        </p>
                                    </div>
                                </div>)}
                            </div>
                        </div>
                    </>

                )
            }


        </div>
    )
}